<template>
  <div class="app-container">
    <div class="app-container_title">{{ useTitle() }}</div>
    <h4 class="form-header h4">基本信息</h4>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="算法名称">{{
        algorithmInfo.name || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="算法ID">{{
        algorithmInfo.file_id || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="算法框架">{{
        algorithmInfo.framework || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="项目名称">{{
        algorithmInfo.project || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="任务场景">{{
        algorithmInfo.scenario || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="入口类名">{{
        algorithmInfo.entry_class || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="Python版本">
        <el-tag size="small">{{ algorithmInfo.python_version || "-" }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{
        parseTime(algorithmInfo.created_at) || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{
        parseTime(algorithmInfo.updated_at) || "-"
      }}</el-descriptions-item>
      <el-descriptions-item label="算法版本">
        <el-tag size="small">{{ algorithmInfo.version || "-" }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="算法描述" :span="2">
        {{ algorithmInfo.description || "-" }}
      </el-descriptions-item>
    </el-descriptions>

    <h4 class="form-header h4">版本列表</h4>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain @click="handleAdd">新增版本</el-button>
      </el-col>
    </el-row>

    <div class="app-container_table">
      <div class="app-container_table_main">
        <el-table
          v-loading="loading"
          ref="roleRef"
          @selection-change="handleSelectionChange"
          :data="detailsList"
        >
          <el-table-column label="版本号" align="center" prop="version" />
          <el-table-column label="版本描述" align="center" prop="describe" />
          <el-table-column
            label="更新时间"
            align="center"
            prop="updateTime"
            width="180"
          >
            <template #default="scope">
              <span>{{ parseTime(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-tooltip content="部署推理" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="DataAnalysis"
                  @click="handleDelete(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="修改" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="download"
                  @click="handleUpdate(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  link
                  type="danger"
                  icon="Delete"
                  @click="handleDelete(scope.row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <pagination
        v-show="total > 0"
        :total="total"
        :current-page="pageNum"
        :page-size="pageSize"
        @update:current-page="pageNum = $event"
        @update:page-size="pageSize = $event"
      />
    </div>

    <el-dialog title="新增版本" v-model="open" width="800px" append-to-body>
      <el-form
        ref="versionForm"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <!-- 版本号 -->
        <el-form-item label="版本号" prop="version">
          <el-input v-model="form.version" placeholder="请输入版本号" />
        </el-form-item>
        <!-- 上传版本文件 -->
        <el-form-item
          label="上传版本文件"
          prop="versionFile"
          :rules="fileRules"
        >
          <el-upload
            class="upload-demo"
            drag
            action="/upload"
            :on-change="handleFileChange"
            :before-upload="beforeUpload"
            :file-list="form.algorithmFileList"
            :on-remove="handleRemoveFile"
            accept=".zip,.tar,.tar.gz,.tar.bz2,.tar.xz"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">拖拽文件或点击上传</div>
          </el-upload>
        </el-form-item>

        <!-- 版本描述 -->
        <el-form-item label="版本描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请输入版本描述"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="AuthRole">
import { ref, onMounted, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { useTitle } from "@/utils/dynamicTitle";
import { ElMessage } from "element-plus";
import { getAlgorithm } from "@/api/algorithm";
import { parseTime } from "@/utils/ruoyi";

const route = useRoute();
const { proxy } = getCurrentInstance();

const loading = ref(false);
const total = ref(1);
const algorithmInfo = ref({});
const detailsList = ref([
  {
    version: "1.1.1",
    describe: "测试数据",
    description: "",
  },
]);

const pageNum = ref(1);
const pageSize = ref(10);
const open = ref(false);
const rules = ref({
  version: [{ required: true, message: "请输入版本号", trigger: "blur" }],
});
const form = ref({
  version: "",
  versionFile: "",
  description: "",
});

/** 获取算法详情 */
function getAlgorithmDetails() {
  const algorithmId = route.params.id;
  if (!algorithmId) {
    ElMessage.error("算法ID不存在");
    return;
  }

  loading.value = true;
  getAlgorithm(algorithmId)
    .then((response) => {
      algorithmInfo.value = response || {};
      loading.value = false;
    })
    .catch(() => {
      ElMessage.error("获取算法详情失败");
      loading.value = false;
    });
}

/** 重置新增的表单以及其他数据  */
function reset() {
  form.value = {
    version: "",
    versionFile: "",
    description: "",
  };
}
/** 添加版本 */
function handleAdd() {
  reset();
  open.value = true;
}
/** 关闭按钮 */
function close() {
  const obj = { path: "/system/user" };
  proxy.$tab.closeOpenPage(obj);
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["versionForm"].validate((valid) => {
    if (valid) {
      if (form.value.roleId != undefined) {
        form.value.menuIds = getMenuAllCheckedKeys();
        updateRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        form.value.menuIds = getMenuAllCheckedKeys();
        addRole(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

// 组件挂载时获取算法详情
onMounted(() => {
  getAlgorithmDetails();
});
</script>

<style lang="scss" scoped>
.el-descriptions {
  margin: 20px 0;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.app-container_table {
  height: calc(100vh - 430px);
  border-radius: 10px;
  border: 1px solid #e9e9e9;
  overflow: hidden;
  .app-container_table_main {
    height: 92%;
  }
}
</style>
